<template>
  <div class="mall-toolbar-container">
    <van-grid
      class="mall-van-gird"
      icon-size="20"
      :border="false"
      :clickable="true"
    >
      <van-grid-item icon="home-o" text="首页" @click="onTab('/home')"/>
      <van-grid-item icon="shopping-cart-o" text="购物车" @click="onTab('/cart')"/>
      <van-grid-item icon="bag-o" text="订单" @click="onTab('/order')"/>
      <van-grid-item icon="manager-o" text="个人中心" @click="onTab('/user')"/>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'Nav',
  methods: {
    onTab (path) {
      this.$router.push({
        path: path
      })
    }
  }
}
</script>

<style lang="less">
  .mall-toolbar-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1001;
    border-top: 1px solid #ccc;
  }
</style>
